<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>药店管理系统 - 登录</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/layui/css/layui.css" rel="stylesheet">
<style>
	body {
		background: linear-gradient(120deg, #e0f2f1, #b2dfdb);
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		font-family: "Microsoft YaHei", sans-serif;
	}
	.login-wrapper {
		width: 400px;
		background: rgba(255, 255, 255, 0.95);
		padding: 40px 50px;
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.1);
		transition: all 0.3s ease;
	}
	.login-wrapper:hover {
		transform: translateY(-5px);
		box-shadow: 0 12px 28px rgba(0,0,0,0.15);
	}
	.login-header {
		text-align: center;
		margin-bottom: 35px;
	}
	.login-header h2 {
		font-size: 28px;
		color: #2c3e50;
		margin-bottom: 12px;
		font-weight: 600;
		letter-spacing: 1px;
	}
	.login-header p {
		color: #7f8c8d;
		font-size: 15px;
	}
	.login-form .layui-form-item {
		margin-bottom: 25px;
	}
	.login-form .layui-input {
		height: 48px;
		line-height: 48px;
		border-radius: 6px;
		padding-left: 45px;
		border: 2px solid #e8e8e8;
		transition: all 0.3s ease;
	}
	.login-form .layui-input:focus {
		border-color: #009688;
		box-shadow: 0 0 0 3px rgba(0,150,136,0.1);
	}
	.login-form .layui-input-prefix {
		left: 15px;
		font-size: 18px;
		color: #95a5a6;
	}
	.login-form .layui-btn {
		width: 100%;
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		border-radius: 6px;
		background: #009688;
		box-shadow: 0 4px 12px rgba(0,150,136,0.3);
		transition: all 0.3s ease;
	}
	.login-form .layui-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(0,150,136,0.4);
	}
	.login-form .layui-btn:active {
		transform: translateY(0);
		box-shadow: 0 2px 8px rgba(0,150,136,0.4);
	}
	/* 添加输入框占位符样式 */
	.login-form .layui-input::placeholder {
		color: #bdc3c7;
	}
	/* 添加图标动画效果 */
	.login-form .layui-input-prefix i {
		transition: all 0.3s ease;
	}
	.login-form .layui-input:focus + .layui-input-prefix i {
		color: #009688;
	}
</style>
</head>

<body>

<div class="login-wrapper">
	<div class="login-header">
		<h2>小药店管理系统</h2>
		<p>欢迎来到小药店管理系统，请先登录</p>
	</div>
	<form class="layui-form login-form">
		<div class="layui-form-item">
			<div class="layui-input-wrap">
				<div class="layui-input-prefix">
					<i class="layui-icon layui-icon-username"></i>
				</div>
				<input type="text" name="username" value="" lay-verify="required" placeholder="请输入用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-wrap">
				<div class="layui-input-prefix">
					<i class="layui-icon layui-icon-password"></i>
				</div>
				<input type="password" name="password" value="" lay-verify="required" placeholder="请输入密码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<button class="layui-btn" lay-submit lay-filter="login">登 录</button>
		</div>
	</form>
</div>

</body>
<script src="/layui/layui.js"></script>
<script>
	layui.use(['form', 'layer', 'jquery'], function(){
		var form = layui.form;
		var layer = layui.layer;
		var $ = layui.jquery;
		
		// 监听登录表单提交
		form.on('submit(login)', function(data){
			$.ajax({
				url: '/user/login',
				type: 'POST',
				data: data.field,
				success: function(res){
					if(res.code === 0){
						layer.msg('登录成功', {
							icon: 1,
							time: 1000
						}, function(){
							window.location.href = '/index.html';
						});
					} else {
						layer.msg(res.msg || '登录失败', {icon: 2});
					}
				},
				error: function(){
					layer.msg('服务器错误，请稍后重试', {icon: 2});
				}
			});
			return false;
		});
	});
</script>
</html>